<template>
  <div class="main-wrapper">
    <div class="main-content" style="display: flex; justify-content: space-between;" >
      <div class="main-content-left" style=" margin-top: 40px; width: 90vw; height: 80vh;  float: left; min-height: 1000px;">
        <!-- 课程标题和价格信息 -->
        <div style="text-align: center">
          <el-button type="success">{{ courseData.type === 'VIDEO' ? '视频课' : '图文课' }}</el-button>
          <span style="font-size: 20px; font-weight: 550; color: #333333; margin-left: 20px">{{ courseData.name }}</span>
        </div>
        <div style="text-align: center; margin-top: 15px">
          <span style="color: red" v-if="courseData.price > 0">￥{{ courseData.price }} </span>
          <span style="color: red" v-else>公开课</span>
          <span style="color: #509a4d; margin-left: 20px" v-if="courseData.discount < 1">{{ courseData.discount*10 }} 折</span>
          <span style="color: #666666; margin-left: 50px">发布时间: {{ courseData.time }}</span>
        </div>

        <!-- 课程板块切换按钮 -->
        <div style="margin: 30px; text-align: center">
          <el-button
              type="primary"
              style="margin-right: 40px;"
              :class="{'is-active': activeTab === 'introduction'}"
              @click="switchTab('introduction')">课程介绍</el-button>
          <el-button
              type="primary"
              style="margin-right: 40px;"
              :class="{'is-active': activeTab === 'catalog'}"
              @click="switchTab('catalog')">课程目录</el-button>
          <el-button
              type="primary"
              style="margin-right: 40px;"
              :class="{'is-active': activeTab === 'materials'}"
              @click="switchTab('materials')">课程资料</el-button>
          <el-button
              type="primary"
              style="margin-right: 40px;"
              :class="{'is-active': activeTab === 'notes'}"
              @click="switchTab('notes')">课程笔记</el-button>
          <el-button
              type="primary"
              :class="{'is-active': activeTab === 'reviews'}"
              @click="switchTab('reviews')">课程评价</el-button>
        </div>

        <!-- 课程介绍区域 -->
        <div v-show="activeTab === 'introduction'" class="content-wrapper">
          <div class="content-title">课程介绍</div>
          <div v-html="courseData.content" class="content-body"></div>
        </div>

        <!-- 课程目录区域 -->
        <div v-show="activeTab === 'catalog'">
          <div class="course-catalog-wrapper">
            <div class="course-catalog-title">课程目录</div>
            <ul class="course-catalog-list">
              <!-- 课程目录列表项 -->
              <li v-for="chapter in courseCatalog" :key="chapter.id" class="course-catalog-list-item">
                <!-- 点击跳转到详情页 -->
                <h3 class="course-catalog-list-item-title"
                    @click="goToCatalogDetail(chapter.id)"
                    style="cursor: pointer;">
                  {{ chapter.chapterTitle }}
                </h3>
                <ul v-if="chapter.sections">
                  <li v-for="section in chapter.sections" :key="section.id" class="sub-chapter-title">
                    {{ section.title }} - {{ section.content }}
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <!-- 课程资料区域 -->
        <div v-show="activeTab === 'materials'" class="content-wrapper">
          <div class="content-title">课程资料</div>
          <div v-if="courseData.price === 0 || flag">
            <video :src="courseData.video" v-if="courseData.type === 'VIDEO'" controls style="width: 65%; height: 400px"></video>
            <div class="content-body">资料链接: <a :href="courseData.file" target="_blank">{{ courseData.file }}</a></div>
          </div>
          <div v-else>
            <span style="color: red; margin-right: 20px">该课程属于付费课程，购买后可解锁</span>
            <el-button type="warning" size="mini" @click="buy">购买课程</el-button>
          </div>
        </div>

        <!-- 课程笔记区域 -->
        <div v-show="activeTab === 'notes'" class="content-wrapper">
          <div class="content-title">课程笔记</div>
          <div class="notes-body">
          </div>
        </div>

        <!-- 课程评价区域 -->
        <div v-show="activeTab === 'reviews'" class="content-wrapper reviews-section">
          <div class="content-title">课程评价</div>
            <!-- 评论区域 -->
            <div class="comment-wrapper">
              <div class="comment-title">欢迎发表您宝贵的意见</div>
              <div class="comment-input">
                <el-input type="textarea" :rows="5" v-model="content"></el-input>
              </div>
              <div class="comment-button">
                <el-button type="primary" @click="submit(content, 0)">提交</el-button>
              </div>
              <div class="comment-list">
                <el-row v-for="item in commentData" :key="item.id">
                  <el-col :span="4">
                    <div class="comment-avatar">
                      <img :src="item.userAvatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
                    </div>
                  </el-col>
                  <el-col :span="20">
                    <div class="comment-content">
                      <div class="comment-username">{{item.userName}}</div>
                      <div class="comment-text">{{item.content}}</div>
                      <div class="comment-time">{{item.time}}</div>
                    </div>
                    <div v-for="child in item.children" :key="child.id" class="comment-reply">
                      <div class="comment-reply-avatar">
                        <img :src="child.userAvatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
                      </div>
                      <div class="comment-reply-content">
                        <div class="comment-reply-username">{{ child.userName }} 回复：</div>
                        <div class="comment-reply-text">{{child.content}}</div>
                        <div class="comment-reply-time">{{child.time}}</div>
                      </div>
                    </div>
                    <div class="comment-reply-input">
                      <el-input style="width: 400px" v-model="item.tmp"></el-input>
                      <el-button type="primary" style="margin-left: 5px" @click="submit(item.tmp, item.id)">回复</el-button>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
        </div>
      </div>

      <div class="main-content-right" style="width: 30%;">
        <div class="right-section teacher-info">
          <!-- 授课教师信息 -->
          <div class="teacher-info">
            <div style="font-size: 18px">授课教师</div>
            <div class="teacher-name">教师姓名</div>
            <div class="teacher-title">教师职称</div>
          </div>
        </div>

        <!-- 课程联系人信息 -->
        <div class="right-section contact-info">
          <div style="font-size: 18px">课程联系人</div>
          <div class="contact-name">教师姓名</div>
          <div class="contact-email">邮箱: email@example.com</div>
          <div class="contact-phone">电话: 1234567890</div>
        </div>

        <!-- 最新学员信息 -->
        <div class="right-section student-info">
          <div style="font-size: 18px">最新学员</div>
          <!-- 学员列表 -->
          <ul>
            <li v-for="student in students" :key="student.name">
              <div class="student-avatar"><img src="student_avatar_url" alt="学员头像" /></div>
              <div class="student-name">{{ student.name }}</div>
            </li>
          </ul>
        </div>
      </div>

    </div>


  </div>

</template>

<script>

export default {

  data() {
    let courseId = this.$route.query.id
    return {
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      courseId: courseId,
      courseData: {},
      flag:false,
      content: null,
      commentData: [],
      courseCatalog: [],

      activeTab: 'introduction',// 默认只显示课程介绍

    }
  },
  mounted() {
    this.loadCourse()
    this.checkCourse()
    this.loadComment()
    this.loadCourseCatalog()
  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    loadCourse() {
      this.$request.get('/Course/selectById/' + this.courseId).then(res => {
        if (res.code === '200') {
          this.courseData = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    checkCourse() {
      this.$request.get('/orders/selectAll', {
        params: {
          userId: this.user.id,
          courseId: this.courseId
        }
      }).then(res => {
        if (res.code === '200') {
          if (res.data.length > 0) {
            this.flag = true
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    buy() {
      let data = {
        courseId: this.courseId,
        userId: this.user.id
      }
      this.$request.post('/orders/add', data).then(res => {
        if (res.code === '200') {
          this.$message.success('购买成功，已解锁课程')
          this.loadCourse()
          this.checkCourse()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    submit(content, parentId) {
      let data = {
        userId: this.user.id,
        courseId: this.courseId,
        content: content,
        parentId: parentId,
      }
      this.$request.post('/comment/add', data).then(res => {
        if (res.code === '200') {
          this.$message.success('评论成功')
          this.content = null
          this.loadComment()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    loadComment() {
      this.$request.get('/comment/selectAll',
          {
            params:{
              courseId: this.courseId
            }
          }
      ).then(res => {
        if (res.code === '200') {
          this.commentData = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    loadCourseCatalog() {
      const courseId = this.courseId; // 确保可以从data中获取courseId
      this.$request.get(`/courseCatalog/getByCourseId/${courseId}`)
          .then(response => {
            if (response) {
              this.courseCatalog = response; // 将响应数据赋值给courseCatalog
            } else {
              this.$message.error('Failed to load course catalog.');
            }
          })
          .catch(error => {
            console.error('Error fetching course catalog:', error);
            this.$message.error('请求课程目录数据时发生错误');
          });
    },
    switchTab(tab) {
      this.activeTab = tab;
    },
    goToCatalogDetail(chapterId) {
      // 获取章节详情，并跳转到详情页
      this.$router.push({
        path: '/catalogDetail',
        query: { id: chapterId }
      });
    },
  }}
</script>

<style>
.is-active {
  color: white;
  background-color: #409eff;
}

/* 基础样式 */
.main-content {
  display: flex;
  justify-content: space-between;
  min-height: 2000px;
  max-width: 1300px; /* 限制最大宽度 */
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff; /* 背景颜色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
}

.main-content-left {
  flex: 1; /* 左侧内容占满剩余空间 */
  box-sizing: border-box;
  width: 70%; /* 根据需要调整 */
}

.main-content-right {
  width: 30%; /* 右侧侧边栏宽度 */
  padding: 20px;
  box-sizing: border-box;
  background-color: #f9f9f9; /* 背景颜色 */
  border-left: 1px solid #ebeef5; /* 左侧边框 */
}

/* 右侧各个部分的样式 */
.right-section {
  margin-bottom: 20px; /* 各部分之间的间距 */
  padding: 20px;
  border-radius: 4px; /* 圆角边框 */
  background-color: #fff; /* 背景颜色 */
  border: 1px solid #ebeef5; /* 边框 */
}

.right-section h2 {
  margin-top: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

/* 教师信息样式 */
.teacher-info img {
  width: 60px;
  height: 60px;
  border-radius: 30px; /* 圆形头像 */
  margin-right: 10px;
  vertical-align: middle;
}

/* 学员列表样式 */
.student-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.student-list li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.student-list img {
  width: 30px;
  height: 30px;
  border-radius: 15px; /* 圆形头像 */
  margin-right: 10px;
}

/* 课程目录容器的外框样式 */
.course-catalog-wrapper {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
  padding: 20px;
  margin-bottom: 30px;
  margin-right: 20px;
}

/* 课程目录标题样式 */
.course-catalog-title {
  font-size: 22px;
  color: #333;
  margin-bottom: 15px;
  text-align: center; /* 标题居中 */
  border-bottom: 1px solid #ebeef5; /* 下边框 */
  padding-bottom: 10px; /* 标题下方的内边距 */
  padding-top: 10px;
}

/* 课程目录列表样式 */
.course-catalog-list {
  list-style-type: none; /* 移除列表项默认样式 */
  padding: 0;
  margin: 0;
}

/* 课程目录列表项样式 */
.course-catalog-list-item {
  padding: 10px 0; /* 列表项的内边距 */
  border-bottom: 1px solid #ebeef5; /* 列表项分隔线 */
}

/* 课程目录列表项中的标题样式 */
.course-catalog-list-item-title {
  font-size: 18px;
  color: #409eff; /* 章节标题的颜色 */
}

/* 鼠标悬浮效果 */
.course-catalog-list-item:hover {
  background-color: #f5f7fa; /* 鼠标悬浮时的背景色 */
}

/* 内容区域样式 */
.content-wrapper {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 30px;
  margin-right: 20px;
}

.content-title {
  font-size: 22px;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.content-body {
  font-size: 15px;
  color: #666;
}

/* 评论区域样式 */
.comment-wrapper {
  margin-top: 50px;
}

.comment-title {
  font-size: 18px;
}

.comment-input {
  margin-top: 20px;
}

.comment-button {
  text-align: right;
  margin-top: 10px;
}

.comment-list {
  margin-top: 30px;
}

.comment-avatar {
  display: flex;
  align-items: center;
}

.comment-content {
  height: 50px;
  line-height: 50px;
}

.comment-username {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-time {
  text-align: right;
}

.comment-reply {
  margin-bottom: 5px;
}

.comment-reply-avatar {
  display: flex;
  align-items: center;
}

.comment-reply-content {
  height: 50px;
  line-height: 50px;
}

.comment-reply-username {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-reply-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-reply-time {
  text-align: right;
}

.comment-reply-input {
  margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .main-content-left, .main-content-right {
    width: 100%;
  }
}
</style>